<div class="meta-section">
    <div class="meta-section-header">
        <h4 class="meta-section-header-title">通用结构：</h4>
    </div>
    <div class="meta-section-container">
        <div class="meta-doc-block">
            <h4 id="">一级导航</h4>
            <p>以侧边栏的形式表现，html文件在views/permission/common/sidebar.html, scss文件在structure.scss</p>
            <div class="meta-doc-block-example">
                <div class="meta-sidebar" style="position:static">
                    <div class="meta-sidebar-header">
                        <p>大标题<span>小标题</span></p>
                    </div>
                    <h2 class="meta-sidebar-list-header">一级导航-列表标题</h2>
                    <ul class="meta-sidebar-list meta-blue-sidebar-list">
                        <li><a class="active">一级导航－选中状态</a></li>
                        <li><a>一级导航</a></li>
                    </ul>
                    <h2 class="meta-sidebar-list-header">一级导航-列表标题</h2>
                    <ul class="meta-sidebar-list meta-blue-sidebar-list">
                        <li><a>一级导航-1</a></li>
                        <li><a>一级导航-2</a></li>
                        <li><a>一级导航-3</a></li>
                    </ul>
                    <h2 class="meta-sidebar-list-header">一级导航-列表标题</h2>
                    <ul class="meta-sidebar-list meta-yellow-sidebar-list">
                        <li><a>一级导航-1</a></li>
                        <li><a>一级导航-2</a></li>
                        <li><a>一级导航-3</a></li>
                    </ul>
                </div>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code data-lang="html">
            &lt;div class="meta-sidebar" style="position:static"&gt;
              &lt;div class="meta-sidebar-header"&gt;
                  &lt;p&gt;大标题&lt;span&gt;小标题&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;h2 class="meta-sidebar-list-header"&gt;一级导航-列表标题&lt;/h2&gt;
              &lt;ul class="meta-sidebar-list meta-blue-sidebar-list"&gt;
                  &lt;li&gt;&lt;a class="active"&gt;一级导航－选中状态&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;h2 class="meta-sidebar-list-header"&gt;一级导航-列表标题&lt;/h2&gt;
              &lt;ul class="meta-sidebar-list meta-blue-sidebar-list"&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;h2 class="meta-sidebar-list-header"&gt;一级导航-列表标题&lt;/h2&gt;
              &lt;ul class="meta-sidebar-list meta-yellow-sidebar-list"&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>二级导航</h4>
            <p>以导航栏的形式表现，html文件每个自模块的根目录下都有个header.html, scss文件在structure.scss。图标均使用font－awesome。右侧图标目前最多支持4个。可自行添加。</p>
            <div class="meta-doc-block-example">
                <div class="meta-header">
                    <a id="open-sidebar"><i class="fa fa-cog"></i></a>
                    <div class="meta-header-nav">
                        <span><a>一级导航标题</a></span>
                        <a class="active">二级导航标题</a>
                        <a>二级导航标题</a>
                        <a>二级导航标题</a>
                    </div>
                    <a class="meta-icon meta-forth-icon"><i class="fa fa-cog"></i></a>
                    <a class="meta-icon meta-third-icon"><i class="fa fa-cog"></i></a>
                    <a class="meta-icon meta-second-icon"><i class="fa fa-cog"></i></a>
                    <a class="meta-icon meta-first-icon"><i class="fa fa-cog"></i></a>
                </div>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code>
            &lt;div class="meta-header"&gt;
                &lt;a id="open-sidebar"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;div class="meta-header-nav"&gt;
                    &lt;span&gt;&lt;a&gt;一级导航标题&lt;/a&gt;&lt;/span&gt;
                    &lt;a class="active"&gt;二级导航标题&lt;/a&gt;
                    &lt;a&gt;二级导航标题&lt;/a&gt;
                    &lt;a&gt;二级导航标题&lt;/a&gt;
                &lt;/div&gt;
                &lt;a class="meta-icon meta-forth-icon"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a class="meta-icon meta-third-icon"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a class="meta-icon meta-second-icon"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a class="meta-icon meta-first-icon"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>详情页</h4>
            <p>详情页一般分为左右两边，左边一般为编辑区或者数据区，宽度为65%，右边一般为控件区，宽度为34.5%。scss文件在structure.scss</p>
            <div class="meta-doc-block-example">
              <div style="height:400px;">
                <div class="meta-edit">
                  <h1>编辑区</h1>
                </div>
              	<div class="meta-control">
                  <h1>控件区</h1>
                </div>
              </div>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code data-lang="html">
            &lt;div style="height:400px;"&gt;
              &lt;div class="meta-edit"&gt;
                &lt;h1&gt;编辑区&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="meta-control"&gt;
                &lt;h1&gt;控件区&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>一级内容区</h4>
            <p>主要拼接各个功能区，例如筛选区，数据区，编辑区，控件区等等。左侧为标题，右侧如果有的话，可以添加若干功能按钮。scss文件在structure.scss</p>
            <div class="meta-doc-block-example">
              <div class="meta-section">
                <div class="meta-section-header">
                  <h4 class="meta-section-header-title">标题</h4>
                  <div class="meta-section-header-buttons">
                    <button class="btn btn-info">按钮</button>
                    <button class="btn btn-info">按钮</button>
                    <button class="btn btn-info">按钮</button>
                  </div>
                </div>
                <div class="meta-section-container">
                  <h3>这里是内容区</h3>
                </div>
              </div>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code data-lang="html">
            &lt;div class="meta-section"&gt;
              &lt;div class="meta-section-header"&gt;
                &lt;h4 class="meta-section-header-title"&gt;标题&lt;/h4&gt;
                &lt;div class="meta-section-header-buttons"&gt;
                  &lt;button class="btn btn-info"&gt;按钮&lt;/button&gt;
                  &lt;button class="btn btn-info"&gt;按钮&lt;/button&gt;
                  &lt;button class="btn btn-info"&gt;按钮&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="meta-section-container"&gt;
                &lt;h3&gt;这里是内容区&lt;/h3&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>二级内容区</h4>
            <p>一级内容区下的子内容区，主要用图标和标题的形式表示，右侧可以有个状态栏。scss文件在structure.scss</p>
            <div class="meta-doc-block-example">
              <div class="meta-secondary-section">
                  <div class="meta-secondary-section-header">
                      <i class="fa fa-user"></i><span>委派操作</span>
                      <p class="meta-status meta-adjust-status meta-online-status">
                          已委派
                      </p>
                  </div>
                  <div class="meta-secondary-section-content">
                      <h3>这里是内容区</h3>
                  </div>
              </div>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code data-lang="html">
            &lt;div class="meta-secondary-section"&gt;
                &lt;div class="meta-secondary-section-header"&gt;
                    &lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;span&gt;委派操作&lt;/span&gt;
                    &lt;p class="meta-status meta-adjust-status meta-online-status"&gt;
                        已委派
                    &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="meta-secondary-section-content"&gt;
                    &lt;h3&gt;这里是内容区&lt;/h3&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>带有下划线的行</h4>
            <p>用在筛选区。scss文件在structure.scss</p>
            <div class="meta-doc-block-example">
              <div class="meta-underline-row">
                <h3>这里是内容区</h3>
              </div>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code data-lang="html">
            &lt;div class="meta-underline-row"&gt;
              &lt;h3&gt;这里是内容区&lt;/h3&gt;
            &lt;/div&gt;
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>控件行</h4>
            <p>用在各种可编辑的控件行里。标题固定宽度90px。控件的话有相关子类。其中多选下拉框使用第三方，如果是小型的下拉框，则添加meta-small-select。scss文件在structure.scss</p>
            <div class="meta-doc-block-example">
              <div class="meta-input-section">
      					<span class="meta-input-section-title">控件名称: </span>
      					<div class="meta-input-section-control">
      						<p style="padding-top:5px;">这里添加控件</p>
      					</div>
      				</div>
              <div class="meta-input-section">
                <span class="meta-input-section-title">多选控件: </span>
                <div class="meta-input-section-control">
                  <div class="meta-checkbox">
                    <label class="checkbox-inline">
                      <input type="checkbox"> 选项一
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox"> 选项二
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox"> 选项三
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox"> 选项四
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox"> 选项五
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox"> 选项六
                    </label>
                  </div>
                </div>
              </div>
              <div class="meta-input-section">
                <span class="meta-input-section-title">多选下拉: </span>
                <div class="meta-input-section-control">
                  <div class="meta-small-select">
    								<ui-select multiple theme="bootstrap" ng-model="test">
    									<ui-select-match class="ui-select-match" placeholder="选择省市自治区，可多选">{{$item}}</ui-select-match>
    									<ui-select-choices class="ui-select-choices" repeat="element in provinceOptions | filter:$select.search track by $index" position='down'>
    										{{element}}
    									</ui-select-choices>
    								</ui-select>
    							</div>
                </div>
              </div>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code data-lang="html">
            &lt;div class="meta-input-section"&gt;
              &lt;span class="meta-input-section-title"&gt;控件名称: &lt;/span&gt;
              &lt;div class="meta-input-section-control"&gt;
                这里添加控件
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="meta-input-section"&gt;
              &lt;span class="meta-input-section-title"&gt;多选控件: &lt;/span&gt;
              &lt;div class="meta-input-section-control"&gt;
                &lt;div class="meta-checkbox"&gt;
                  &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox"&gt; 选项一
                  &lt;/label&gt;
                  &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox"&gt; 选项二
                  &lt;/label&gt;
                  &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox"&gt; 选项三
                  &lt;/label&gt;
                  &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox"&gt; 选项四
                  &lt;/label&gt;
                  &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox"&gt; 选项五
                  &lt;/label&gt;
                  &lt;label class="checkbox-inline"&gt;
                    &lt;input type="checkbox"&gt; 选项六
                  &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="meta-input-section"&gt;
              &lt;span class="meta-input-section-title"&gt;多选下拉: &lt;/span&gt;
              &lt;div class="meta-input-section-control"&gt;
                &lt;div class="meta-small-select"&gt;
                  &lt;ui-select multiple theme="bootstrap"&gt;
                    &lt;ui-select-match class="ui-select-match" placeholder="选择省市自治区，可多选"&gt;{{$item}}&lt;/ui-select-match&gt;
                    &lt;ui-select-choices class="ui-select-choices" repeat="element in provinceOptions | filter:$select.search" position='down'&gt;
                      {/{element}/}
                    &lt;/ui-select-choices&gt;
                  &lt;/ui-select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>表格－列</h4>
            <p>为了更好的节约空间，对数据长度比较固定的数据列可以采用固定的宽度。
              目前主要设计了针对于数字、字符、时间、日期、状态等等一系列的考虑。
              为了保证效果，meta-table下面的所有元素的font-size均为$font-size-xs，即14px，如果有特别的字体大小，需要在属性值上添加!important进行覆盖</p>
            <div class="meta-doc-block-example">
              <p><b>数字：仅支持8～11位</b></p>
              <table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit">
        				<thead>
        					<tr>
        						<th class="meta-number-8-td">8位数字</th>
        						<th class="meta-number-9-td">9位数字</th>
        						<th class="meta-number-10-td">10位数字</th>
        						<th class="meta-number-11-td">11位数字</th>
        					</tr>
        				</thead>
        				<tbody>
                  <tr>
        						<td>12345678</td>
        						<td>123456789</td>
        						<td>1234567890</td>
        						<td>12345678901</td>
        					</tr>
                </tbody>
              </table>
              <p><b>中文字符：仅支持4～10位</b></p>
              <table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit">
        				<thead>
        					<tr>
        						<th class="meta-word-4-td">4位字符</th>
        						<th class="meta-word-5-td">5位字符</th>
        						<th class="meta-word-6-td">6位字符</th>
        						<th class="meta-word-7-td">7位字符</th>
        						<th class="meta-word-8-td">8位字符</th>
        						<th class="meta-word-9-td">9位字符</th>
        						<th class="meta-word-10-td">10位字符</th>
        					</tr>
        				</thead>
        				<tbody>
                  <tr>
        						<td>四个字符</td>
        						<td>五个字符啊</td>
        						<td>六个字符啊啊</td>
        						<td>七个字符啊啊啊</td>
        						<td>八个字符啊啊啊啊</td>
        						<td>九个字符啊啊啊啊啊</td>
        						<td>十个字符啊啊啊啊啊啊</td>
        					</tr>
                </tbody>
              </table>
              <p><b>状态：仅支持3～4位</b></p>
              <table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit">
        				<thead>
        					<tr>
        						<th class="meta-bordered-word-3-td">3位状态</th>
        						<th class="meta-bordered-word-4-td">4位状态</th>
        					</tr>
        				</thead>
        				<tbody>
                  <tr>
        						<td><p class="meta-status">新提交</p></td>
        						<td><p class="meta-status">新提交啊</p></td>
        					</tr>
                </tbody>
              </table>
              <p><b>时间：仅日期和包含时间两种</b></p>
              <table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit">
        				<thead>
        					<tr>
        						<th class="meta-date-td">日期</th>
        						<th class="meta-time-td">时间</th>
        					</tr>
        				</thead>
        				<tbody>
                  <tr>
        						<td>2015-10-11</td>
        						<td>2015-10-11 11:26</td>
        					</tr>
                </tbody>
              </table>
              <p><b>操作按钮：仅支持1～2位</b></p>
              <table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit">
        				<thead>
        					<tr>
        						<th class="meta-icon-1-td">1位</th>
        						<th class="meta-icon-2-td">2位</th>
        					</tr>
        				</thead>
        				<tbody>
                  <tr>
        						<td><a class="fa fa-list fa-2x fa-blue"></a></td>
        						<td><a class="fa fa-list fa-2x fa-blue"></a><a class="fa fa-list fa-2x fa-blue"></a></td>
        					</tr>
                </tbody>
              </table>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code data-lang="html">
            &lt;p&gt;&lt;b&gt;数字：仅支持8～11位&lt;/b&gt;&lt;/p&gt;
            &lt;table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class="meta-number-8-td"&gt;8位数字&lt;/th&gt;
                  &lt;th class="meta-number-9-td"&gt;9位数字&lt;/th&gt;
                  &lt;th class="meta-number-10-td"&gt;10位数字&lt;/th&gt;
                  &lt;th class="meta-number-11-td"&gt;11位数字&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;12345678&lt;/td&gt;
                  &lt;td&gt;123456789&lt;/td&gt;
                  &lt;td&gt;1234567890&lt;/td&gt;
                  &lt;td&gt;12345678901&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;p&gt;&lt;b&gt;中文字符：仅支持4～10位&lt;/b&gt;&lt;/p&gt;
            &lt;table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class="meta-word-4-td"&gt;4位字符&lt;/th&gt;
                  &lt;th class="meta-word-5-td"&gt;5位字符&lt;/th&gt;
                  &lt;th class="meta-word-6-td"&gt;6位字符&lt;/th&gt;
                  &lt;th class="meta-word-7-td"&gt;7位字符&lt;/th&gt;
                  &lt;th class="meta-word-8-td"&gt;8位字符&lt;/th&gt;
                  &lt;th class="meta-word-9-td"&gt;9位字符&lt;/th&gt;
                  &lt;th class="meta-word-10-td"&gt;10位字符&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;四个字符&lt;/td&gt;
                  &lt;td&gt;五个字符啊&lt;/td&gt;
                  &lt;td&gt;六个字符啊啊&lt;/td&gt;
                  &lt;td&gt;七个字符啊啊啊&lt;/td&gt;
                  &lt;td&gt;八个字符啊啊啊啊&lt;/td&gt;
                  &lt;td&gt;九个字符啊啊啊啊啊&lt;/td&gt;
                  &lt;td&gt;十个字符啊啊啊啊啊啊&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;p&gt;&lt;b&gt;状态：仅支持3～4位&lt;/b&gt;&lt;/p&gt;
            &lt;table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class="meta-bordered-word-3-td"&gt;3位状态&lt;/th&gt;
                  &lt;th class="meta-bordered-word-4-td"&gt;4位状态&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;p class="meta-status"&gt;新提交&lt;/p&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;p class="meta-status"&gt;新提交啊&lt;/p&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;p&gt;&lt;b&gt;时间：仅日期和包含时间两种&lt;/b&gt;&lt;/p&gt;
            &lt;table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class="meta-date-td"&gt;日期&lt;/th&gt;
                  &lt;th class="meta-time-td"&gt;时间&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;2015-10-11&lt;/td&gt;
                  &lt;td&gt;2015-10-11 11:26&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;p&gt;&lt;b&gt;操作按钮：仅支持1～2位&lt;/b&gt;&lt;/p&gt;
            &lt;table class="table table-condensed table-striped table-bordered meta-table" style="width:inherit"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class="meta-icon-1-td"&gt;1位&lt;/th&gt;
                  &lt;th class="meta-icon-2-td"&gt;2位&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;a class="fa fa-list fa-2x fa-blue"&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a class="fa fa-list fa-2x fa-blue"&gt;&lt;/a&gt;&lt;a class="fa fa-list fa-2x fa-blue"&gt;&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          </code>
        </pre>
            </div>
        </div>
    </div>
</div>
<div class="meta-section">
    <div class="meta-section-header">
        <h4 class="meta-section-header-title">通用样式：</h4>
    </div>
    <div class="meta-section-container">
        <div class="meta-doc-block">
            <h4>颜色</h4>
            <p>通用的颜色，文件在common.scss中</p>
            <div class="meta-doc-block-example">
                <p class="color-blue">1. $blue</p>
                <p class="color-yellow">2. $yellow</p>
                <p class="color-gray">3. $gray</p>
                <p class="color-normalGray">4. $normalGray</p>
                <p class="color-lightGray">5. $lightGray</p>
                <p class="color-lightBlack">6. $lightBlack</p>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code>
            .example{
              color: $blue;
            }
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>字体</h4>
            <p>通用的文件大小，文件在common.scss中</p>
            <div class="meta-doc-block-example">
                <p class="color-normalGray font-size-xxl">1. $font-size-xxl: 字体大小 24px </p>
                <p class="color-normalGray font-size-xl">2. $font-size-xl: 字体大小 22px </p>
                <p class="color-normalGray font-size-l">3. $font-size-l: 字体大小 20px </p>
                <p class="color-normalGray font-size-m">4. $font-size-m: 字体大小 18px </p>
                <p class="color-normalGray font-size-s">5. $font-size-s: 字体大小 16px </p>
                <p class="color-normalGray font-size-xs">6. $font-size-xs: 字体大小 14px </p>
                <p class="color-normalGray font-size-xxs">7. $font-size-xxs: 字体大小 12px </p>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code>
            .example{
              font-size: $font-size-m;
            }
          </code>
        </pre>
            </div>
        </div>
        <div class="meta-doc-block">
            <h4>状态</h4>
            <p>通用的状态选项，为了方便起见，多命名了2个状态。文件在common.scss中</p>
            <div class="meta-doc-block-example">
                <p class="meta-status meta-inline-status meta-process1-status">正在审核 </p>
                <p class="meta-status meta-inline-status meta-process2-status">联系沟通</p>
                <p class="meta-status meta-inline-status meta-process3-status">邀请对接</p>
                <p class="meta-status meta-inline-status meta-process4-status">线下对接</p>
                <p class="meta-status meta-inline-status meta-process5-status">提交合同</p>
                <p class="meta-status meta-inline-status meta-process6-status">确认签约</p>
                <p class="meta-status meta-inline-status meta-start-status">开始状态</p>
                <p class="meta-status meta-inline-status meta-finish-status">完成状态</p>
                <p class="meta-status meta-inline-status meta-ended-status">终止状态</p>
                <p class="meta-status meta-inline-status meta-online-status">好的状态</p>
                <p class="meta-status meta-inline-status meta-offline-status">坏的状态</p>
            </div>
            <div class="meta-doc-block-code">
                <pre>
          <code>
            &lt;p class="meta-status meta-inline-status meta-process1-status"&gt;正在审核 &lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-process2-status"&gt;联系沟通&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-process3-status"&gt;邀请对接&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-process4-status"&gt;线下对接&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-process5-status"&gt;提交合同&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-process6-status"&gt;确认签约&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-start-status"&gt;开始状态&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-finish-status"&gt;完成状态&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-ended-status"&gt;终止状态&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-online-status"&gt;好的状态&lt;/p&gt;
            &lt;p class="meta-status meta-inline-status meta-offline-status"&gt;坏的状态&lt;/p&gt;
          </code>
        </pre>
            </div>
        </div>



    </div>
</div>
